<template>
    <div class="formBox">
        <el-form ref="formRef" label-position="top">
            <el-row :gutter="24">
                <el-col :span="7">
                    <el-form ref="formRef">
                        <el-row :gutter="24">
                            <el-col :span="24">
                                <div class="tabBox">
                                    <div class="hover" :class="item.code == state.tabValue ?'active':''"
                                        v-for="item in tabList" @click="tabClick(item)">{{ item.name }}
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="24" v-if="state.tabValue==1">
                                <el-form-item label="开始时间">
                                    <el-date-picker v-model="state.formData.startTime" format="YYYY-MM-DD HH:mm:ss"
                                        type="datetime" placeholder="请选择" />
                                </el-form-item>
                                <el-form-item label="结束时间" prop="deviceName">
                                    <el-date-picker v-model="state.formData.endTime" format="YYYY-MM-DD HH:mm:ss"
                                        type="datetime" placeholder="请选择" />
                                </el-form-item>
                                <div class="dayList">
                                    <span v-for="item in state.dayList" @click="timeTabClick(item)">
                                        <span>{{ item.label }}</span>
                                    </span>
                                </div>
                                <!-- <el-form-item label="编号" prop="deviceName">
                                    <el-select class="w100" clearable filterable v-model="state.formData.mutationType"
                                        placeholder="请选择" @change="stationModelChange">
                                        <el-option v-for="item in state.stationmodelList" :key="item.value"
                                            :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="名称" prop="deviceName">
                                    <el-select class="w100" clearable filterable v-model="state.formData.mutationType"
                                        placeholder="请选择" @change="stationModelChange">
                                        <el-option v-for="item in state.stationmodelList" :key="item.value"
                                            :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="地点" prop="deviceName">
                                    <el-select class="w100" clearable filterable v-model="state.formData.mutationType"
                                        placeholder="请选择" @change="stationModelChange">
                                        <el-option v-for="item in state.stationmodelList" :key="item.value"
                                            :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item> -->
                            </el-col>
                            <el-col :span="24" v-if="state.tabValue==2">
                                <el-form-item label="日期" prop="deviceName">
                                    <el-date-picker v-model="state.formData.dateTimevalue" @change="dateTimevalueChange" type="date"
                                        placeholder="请选择" />
                                </el-form-item>
                                <el-form-item label="班次选择">
                                    <el-select class="w100" clearable filterable v-model="state.formData.baiciValue"
                                        placeholder="请选择">
                                        <el-option v-for="item in state.bancilList" :key="item.value"
                                            :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item>
                                    <el-button class="w100" type="primary" @click="queryClick">查询</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                </el-col>
                <el-col :span="17">
                    <el-form ref="formRef">
                        <el-row :gutter="20">
                            <el-col :span="24" v-if="recordInfoList.length>0">
                                <p class="drawer_sub_title">
                                    <span class="sub_title_line">统计信息</span>
                                </p>
                            </el-col>
                            <el-col :span="item.col" v-for="item in recordInfoList" v-show="recordInfoList.length>0">
                                <el-form-item :label="item.label">
                                    <el-input disabled v-if="item.type=='input'" v-model="item.binddata"
                                        placeholder="请输入">
                                    </el-input>
                                    <el-select disabled v-if="item.type=='select'" class="w100" clearable filterable
                                        v-model="item.binddata" placeholder="请选择">
                                        <el-option v-for="item in item.options" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <slot name="detailBox"></slot>
                            </el-col>
                            <el-col :span="24" style="margin-top: 10px;">
                                <p class="drawer_sub_title">
                                    <span class="sub_title_line">详细信息</span>
                                </p>
                                <vxe-table height="300" :data="bjjlObj.listTable" border="inner">
                                    <vxe-column v-for="item in bjjlThead" :field="item.field" :title="item.title">
                                    </vxe-column>
                                </vxe-table>
                                <el-pagination v-if="bjjlObj.total>0" class="pages globalFontSize"
                                    v-model:current-page="state.listAnalog.pageNum"
                                    v-model:page-size="state.listAnalog.pageSize" :page-sizes="[10, 20, 30, 40]"
                                    background layout="total, sizes, prev, pager, next, jumper" :total="bjjlObj.total"
                                    @size-change="getPointDatabjjl" @current-change="getPointDatapagebjjl" />
                            </el-col>
                        </el-row>
                    </el-form>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect,
        defineExpose
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    import dayjs from 'dayjs'
    import isoWeek from 'dayjs/plugin/isoWeek'
    dayjs.extend(isoWeek);

    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const props = defineProps({
        tabList: {
            type: Array,
            default: () => {
                return [{
                        name: '时间查询',
                        code: 1
                    },
                    {
                        name: '班次查询',
                        code: 2
                    }
                ]
            }
        },
        formListRules: {
            type: Array,
            default: () => {
                return []
            }
        },
        bjjlThead: {
            type: Array,
            default: () => {
                return []
            }
        },
        recordInfoList: {
            type: Array,
            default: () => {
                return []
            }
        },
        bjjlObj: {
            type: Object,
            default: () => {
                return {}
            }
        }
    })
    const emits = defineEmits(["vateResult"])
    // 重点
    const state = reactive({
        dataObj: {},
        formData: {},
        dayList: [{
                type: 1,
                label: '前一天'
            },
            {
                type: 2,
                label: '当天'
            },
            {
                type: 3,
                label: '后一天'
            },
            {
                type: 4,
                label: '本周'
            },
            {
                type: 5,
                label: '本月'
            }
        ],
        tabValue: 1,
        listAnalog: {
            pageNum: 1,
            pageSize: 10,
            total: 0,
            list: []
        },
        bancilList: []
    })

    function timeTabClick(item) {
        if (item.type == 1) {
            state.formData.startTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD 00:00:00')
            state.formData.endTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD 23:59:59')
        } else if (item.type == 2) {
            state.formData.startTime = dayjs().format('YYYY-MM-DD 00:00:00')
            state.formData.endTime = dayjs().format('YYYY-MM-DD 23:59:59')
        } else if (item.type == 3) {
            state.formData.startTime = dayjs().add(1, 'day').format('YYYY-MM-DD 00:00:00')
            state.formData.endTime = dayjs().add(1, 'day').format('YYYY-MM-DD 23:59:59')
        } else if (item.type == 4) {
            state.formData.startTime = dayjs().startOf('isoWeek').format('YYYY-MM-DD 00:00:00')
            state.formData.endTime = dayjs().endOf('isoWeek').format('YYYY-MM-DD 23:59:59')
        } else if (item.type == 5) {
            let endVal = dayjs().endOf('month').date()
            state.formData.startTime = dayjs().format('YYYY-MM-01 00:00:00')
            state.formData.endTime = dayjs().format(`YYYY-MM-${endVal} 23:59:59`)
        }
    }
    const submitForm = () => {

        proxy.$refs["formRef"].validate(valid => {
            if (valid) {
                emits('vateResult', state.formData, true)
            }
        })

    }

    function tabClick(item) {
        state.tabValue = item.code
        if(state.tabValue==2){
            bancisearchAll()
        }
    }

    function getPointDatabjjl(val) {
        emits('getPointDatabjjl', val)
    }

    function getPointDatapagebjjl(val) {
        emits('getPointDatapagebjjl', val)
    }

    function bancisearchAll() {
        axios.post("/class/info/searchAll", {}).then((res) => {
            state.dataObj.classInfo = res.data.list[0];
            state.formData.baiciValue=res.data.list[0].id
            state.bancilList = res.data.list.map(item => {
                return {
                    label: item.className,
                    value: item.id
                }
            })
        })
    }
    function dateTimevalueChange(){
        banciList()
    }

    function banciList() {
        state.dataObj.dateSuffix = dayjs(state.formData.dateTimevalue).format('YYYY-MM-DD')
        axios.post("/hisPointFeed/handleClassInfo", state.dataObj).then((res) => {
            state.formData.startTime = res.data.feedStartTime
            state.formData.endTime = res.data.feedEndTime
        });
    }

    function queryClick() {
        if (state.formData.startTime && state.formData.endTime) {
            state.formData.type = state.tabValue
            emits('querybjjlClick', state.formData)
        } else {
            proxy.$modal.msgWarning('请选择开始和结束时间');
        }

    }
    watchEffect(() => {
        console.log(props.bjjlObj, "大萨达看见啊");

    })
    defineExpose({
        submitForm
    });
</script>
<style lang="scss" scoped>
    .pages {
        margin-top: 20px;
        text-align: right;
    }

    .tabBox {
        display: flex;
        font-size: 14px;
        background-color: rgba(91, 109, 128, 0.08);
        margin-bottom: 10px;

        &>div {
            text-align: center;
            color: rgba(62, 70, 79, 1);
            flex: 1;
            padding: 4px;

            &.active {
                background-color: rgba(64, 158, 255, 1);
                color: #fff;
            }
        }
    }

    .dayList {
        color: rgba(53, 140, 240, 1);
        font-size: 12px;
        margin: 9px 10px 10px;
        text-align: center;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        span {
            cursor: pointer;
            margin-bottom: 12px;
            width: 30%;
            text-align: center;

            &:nth-child(5),
            &:nth-child(3) {
                text-align: right;
            }

            &:nth-child(1),
            &:nth-child(4) {
                text-align: left;
            }

            span {
                border-bottom: 1px solid rgba(53, 140, 240, 1);
            }
        }
    }
</style>